<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"  %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions"     prefix="fn" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="baidu-site-verification" content="nn0upi0wym" />
        <title>MIO美爱我氧气站</title>
        <link rel="icon" href="${pageContext.request.contextPath }/assets/images/mio.ico" type="image/x-icon">
        <link href="${pageContext.request.contextPath }/assets/css/main.css" rel="stylesheet" type="text/css" />	
   	    <script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/jquery-1.9.1.js"></script>
   	    <script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/jquery.form.js"></script>
    	<script type="text/javascript" src="${pageContext.request.contextPath }/assets/videoplayer/flowplayer-3.2.8.min.js"></script>
    </head>
    <body style="background:url(${pageContext.request.contextPath }/assets/images/mio_bg2.jpg);background-attachment:fixed">
    	<div id="bg">
    		<!-- 头部jsp -->
			<jsp:include page="header.jsp" ></jsp:include>
			<div style="clear:both;"></div>
			<div class="videoDiv">
				<a id="player" class="row"  href=""></a>
				  <script>
			            flowplayer("player", "${pageContext.request.contextPath }/assets/videoplayer/flowplayer-3.2.8.swf",{  
			            	clip: {  
				              //scaling:'orig',//"${pageContext.request.contextPath }/assets/video/MIO.flv",
				              url: "${movie.movieUrl }",
			            	  autoPlay:true,      
			                  autoBuffering:true
				            },   
				            
				        });   
			      </script>
				  <!-- <div class="video-hiddenDIv" style="background:url(${pageContext.request.contextPath }/assets/images/mio_video.png); width:1000px; height:563px; position:relative; top:-570px;" onclick="$('.video-hiddenDIv').css('display','none');$('#player').click();"></div> -->
			</div>
			<div class="videoDivFooter"></div>
		</div>
		<div id="HeatRankingList">
			<div style="height:5px;"></div>
			<div class="HeatTitle">
				<div class="title_bg">
					<div class="title_text">人气热销排行榜</div>
				</div>
			</div>
			<div class="HeatMainDiv">
				<div class="HeatMainBorder">
					<c:forEach var="product" items="${productList }" varStatus="status">
					<div class="HeatCell">
					<c:if test="${status.index == 0}">
						<div class="rankingTitle rankFirstColor">
							<img src="${pageContext.request.contextPath }/assets/images/crown.jpg" height="30px">NO.1
						</div>
						<div class="rankingDiv">
							<img src="${product.mImgUrl }" height="100%" onclick="goToProduct(${product.id},${product.mainTypeId},${product.productTypeId })"/>
						</div>
					</c:if>
					<c:if test="${status.index > 0}">
						<div class="rankingTitle rankOtherColor">
						NO.${status.index+1 }
						</div>
						<div class="rankingDiv">
							<img src="${product.mImgUrl }" height="100%" onclick="goToProduct(${product.id},${product.mainTypeId},${product.productTypeId })"/>
						</div>
					</c:if>
					</div>
					</c:forEach>
					<script>
						//居中图片
						$(".rankingDiv img").css({
							"margin-left":($(".rankingDiv").width()-$(".rankingDiv img").height())/2,
							"cursor":"pointer"
						})
						function goToProduct(productId,mainTypeId,productTypeId){
							location.href="${pageContext.request.contextPath }/productDetail.do?productId="+productId+"&productType="+productTypeId+"&mainTypeId="+mainTypeId;
						}
						function menu_news(){
							location.href="${pageContext.request.contextPath }/message.do";
						}
					</script>
					<!-- <div class="HeatCell">
						<div class="rankingTitle rankOtherColor">
						NO.6
						</div>
						<div class="rankingDiv">
							<img src="${pageContext.request.contextPath }/assets/images/top6.jpg" width="100%"/>
						</div>
					</div>
					<div class="HeatCell">
						<div class="rankingTitle rankOtherColor">
						NO.7
						</div>
						<div class="rankingDiv">
							<img src="${pageContext.request.contextPath }/assets/images/top7.jpg" width="100%"/>
						</div>
					</div>
					<div class="HeatCell">
						<div class="rankingTitle rankOtherColor">
						NO.8
						</div>
						<div class="rankingDiv">
							<img src="${pageContext.request.contextPath }/assets/images/top8.jpg" width="100%"/>
						</div>
					</div>
					<div class="HeatCell">
						<div class="rankingTitle rankOtherColor">
						NO.9
						</div>
						<div class="rankingDiv">
							<img src="${pageContext.request.contextPath }/assets/images/top9.jpg" width="100%"/>
						</div>
					</div>
					<div class="HeatCell">
						<div class="rankingTitle rankOtherColor">
						NO.10
						</div>
						<div class="rankingDiv">
							<img src="${pageContext.request.contextPath }/assets/images/top10.jpg" width="100%"/>
						</div>
					</div> -->
				</div>
			</div>
		</div>
		<div id="bg">
			<div class="content">
				
                <div id="ind_left">
                	<!-- <div class="pro_bt">   
	                    <li><a onclick="">羙羙推荐</a></li>      
	                </div> -->
                    <div class="products">
                        <div class="img_list">
                            <div id="show_pro">
                                <div id="Index_Pro_Pic">
                                	<c:forEach var="item" items="${recommendList }" varStatus="status">
                                	<div class="pro_l" style="margin-left:38px;">
                                		<a class="pro_img" href="${pageContext.request.contextPath }/recommandDetail.do?recommendId=${item.id}">
                                			<img style="width:160px;height:100px;margin-top:25px;" src="${item.sImgUrl}" alt="${item.title}" title="${item.title}" border="0">
                                		</a>
                                	</div>
                                	</c:forEach>
                                	<!-- <div class="pro_l">
                                		<a class="pro_img" href="${pageContext.request.contextPath }/recommand.do">
                                			<img style="width:160px;height:107px;margin-top:21.5px;" src="${pageContext.request.contextPath }/assets/images/mm2.jpg" alt="2014 vivi4月號 cosmo蘋果光魔術cc筆" title="2014 vivi4月號 cosmo蘋果光魔術cc筆" border="0">
                                		</a>
                                	</div> 
                                	<div class="pro_l" style="margin-right:38px;">
                                		<a class="pro_img" href="${pageContext.request.contextPath }/recommand.do">
                                			<img style="width:160px;height:104px;margin-top:23px;" src="${pageContext.request.contextPath }/assets/images/mm3.jpg" alt="2013 儂儂雜誌抗老別冊9月號 修護神霜 瑞士維他命b12" title="2013 儂儂雜誌抗老別冊9月號 修護神霜 瑞士維他命b12" border="0">
                                		</a>
                                	</div>-->
                                </div>
                            </div>
                            <div id="show_pro_down"><a onclick="return Index_Pro_Down()"></a></div>
                        </div>
                    </div>
                    <div class="news"><h3></h3>
                        <div class="news_title"><div class="news_title_right"><a href="#" onclick="menu_news();"></a></div></div>
                        <div class="news_list">
                        	<c:forEach var="item" items="${messageList }" varStatus="status">
                        	<div class="show_news_div2">${fn:replace(fn:substring(item.createdTime, 0, 10),"-",".")}</div><div align="left" class="show_news_div1"><a target="_parent" href="${pageContext.request.contextPath }/messageDetail.do?messageId=${item.id }">${item.title }</a></div>	
                        	</c:forEach>
                                    
                        </div>
                    </div>
                    <div class="down_ad">
                    	<c:forEach var="item" items="${codeLeftProduct }" varStatus="status">
                    	<c:if test="${status.index == 0}">
                    	<div class="ad_left">
                    	     <a href="${pageContext.request.contextPath }/productDetail.do?productId=${item.zipId }"><img src="${item.fileFullPath }" width="305"></a>
                        </div>
                    	</c:if>
                    	<c:if test="${status.index != 0}">
                    	<div class="ad_right">
                    	     <a href="${pageContext.request.contextPath }/productDetail.do?productId=${item.zipId }"><img src="${item.fileFullPath }" width="305"></a>
                        </div>
                    	</c:if>
                    	</c:forEach>

                    </div>
                </div>
                <div id="ind_right">
                    <div class="ad">
                    	<!--  target="_blank"-->
                        <a  title="" id="a1" href="${pageContext.request.contextPath }/productDetail.do?productId=${codeUpProduct.id }&productType=${codeUpProduct.productTypeId }"><img style="width:311px;height:400px;margin-top:0px;" src="${codeUpProduct.sImgUrl}"></a>                        <!-- <a href="#"><img src="http://www.elizecosmo.com.tw/system/media/img/ad.jpg"></a> -->
                    	<div style="color:#000;font-size:14px;text-align:bottom;height:70px;overflow:hidden; text-overflow:ellipsis;" >
                        	<!-- 洗脸洗对了  好肤质跟着来!! 早上洗脸可以洗去前晚皮肤代谢的老废角质细胞，晚上洗脸可以去除彩妆、过多的油脂和灰尘，因此每天应该洗两次脸。 -->
                        	${ codeUpProduct.introduction }
                        </div>
                    </div>
                    <div class="mov">
                        <!-- <iframe width="312" height="240" src="//www.youtube.com/embed/iH4hWqb8YaY" frameborder="0" allowfullscreen=""></iframe>                         <!-- <img src="http://www.elizecosmo.com.tw/system/media/img/move.jpg"> -->
                        
                    </div>
                    <div class="joinus"><img src="${pageContext.request.contextPath }/assets/images/joinus.png" border="0" usemap="#Map" width="314px" height="115px">
                        <!-- <map name="Map" id="Map">
                            
                            <area shape="rect" coords="181,38,247,104" href="http://www.youtube.com/watch?v=0jonoEpifSE" target="_blank">
                            <area shape="rect" coords="68,37,134,103" href="https://www.facebook.com/elizecosmoCOM" target="_blank">
                        </map> -->
                    </div>
                </div>
            </div>
            <!-- 尾部jsp -->
			<jsp:include page="footer.jsp"></jsp:include>
	    </div>
    </body>
</html>